<template>
  <div>
    <el-table :data="showdata" style="width: 100%">
      <el-table-column prop="id" label="编号" width="150px"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150px"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150px">
        <template slot-scope="props">
          <span>{{ props.row.gender | gender }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="date" label="入职日期"></el-table-column>
    </el-table>
    <el-pagination @current-change="change_" background :page-size="11" :total="total"></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showdata: [],
      userdata: []
    };
  },
  computed: {
    total() {
      return this.userdata.length;
    }
  },
  methods: {
    change_(x) {
      let staticIndex = (x - 1) * 11;
      let afterIndex = x * 11;
      this.showdata = this.userdata.slice(staticIndex, afterIndex);
    }
  },
  created() {
    this.$http.get("/api/user/mock").then(res => {
      this.userdata = res.data.data;
      this.showdata = this.userdata.slice(0, 11);
    });
  }
};
</script>

<style>
</style>